<template>
    <div class="crm-enterprise-container">
        <el-dialog title="企业详情" v-model="isShowDialog" width="95%" :close-on-click-modal="false" :style="{ minHeight: '500px' }">
            <el-tabs v-model="activeName" class="enterprise-detail">
                <el-tab-pane label="企业详情" name="enterprise">
                    <el-descriptions :column="4" border>
                        <el-descriptions-item label="企业名称">{{ enterprise.enterpriseName }}</el-descriptions-item>
                        <el-descriptions-item label="统一社会信用代码">{{ enterprise.creditCode }}</el-descriptions-item>
                        <el-descriptions-item label="法定代表人">{{ enterprise.legalName }}</el-descriptions-item>
                        <el-descriptions-item label="企业规模">{{ getDictionaryText('crm_enterprise_scale', enterprise.enterpriseScale) }}</el-descriptions-item>
                        
                        <el-descriptions-item label="注册资本">{{ enterprise.registeredCapital }}万元</el-descriptions-item>
                        <el-descriptions-item label="成立日期">{{ enterprise.enterpriseDate }}</el-descriptions-item>
                        <el-descriptions-item label="国标行业">{{ enterprise.industry }}</el-descriptions-item>
                        <el-descriptions-item label="员工人数">{{ enterprise.employeeCount }}</el-descriptions-item>
                        
                        <el-descriptions-item label="手机号码">{{ enterprise.mobile }}</el-descriptions-item>
                        <el-descriptions-item label="电话号码">{{ enterprise.telephone }}</el-descriptions-item>
                        <el-descriptions-item label="邮箱号码">{{ enterprise.email }}</el-descriptions-item>
                        <el-descriptions-item label="网址">{{ enterprise.website }}</el-descriptions-item>
                        
                        <el-descriptions-item label="详细地址" :span="4">{{ enterprise.address }}</el-descriptions-item>
                        <el-descriptions-item label="企业简介" :span="4">{{ enterprise.description }}</el-descriptions-item>

                        <el-descriptions-item label="创建者">{{ enterprise.createBy }}</el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{ enterprise.createTime }}</el-descriptions-item>
                        <el-descriptions-item label="更新者">{{ enterprise.updateBy }}</el-descriptions-item>
                        <el-descriptions-item label="更新时间">{{ enterprise.updateTime }}</el-descriptions-item>
                        <el-descriptions-item label="所属用户">{{ enterprise.userName }}</el-descriptions-item>
                        <el-descriptions-item label="所属部门">{{ enterprise.deptName }}</el-descriptions-item>
                        <el-descriptions-item label="备注">{{ enterprise.remark }}</el-descriptions-item>
                    </el-descriptions>
                </el-tab-pane>
                <el-tab-pane label="客户详情" name="customer">
                    <el-descriptions :column="4" border v-for="customer in enterprise?.customers" class="mb15">
                        <el-descriptions-item label="客户名称">{{ customer.customerName }}</el-descriptions-item>
                        <el-descriptions-item label="身份证号码">{{ customer.idNumber }}</el-descriptions-item>
                        <el-descriptions-item label="客户来源">{{ getDictionaryText('crm_customer_source', customer.source) }}</el-descriptions-item>
                        <el-descriptions-item label="客户级别">{{ getDictionaryText('crm_customer_level', customer.level) }}</el-descriptions-item>
                        
                        <el-descriptions-item label="手机号码">{{ customer.mobile }}</el-descriptions-item>
                        <el-descriptions-item label="电话号码">{{ customer.telephone }}</el-descriptions-item>
                        <el-descriptions-item label="邮箱号码" :span="2">{{ customer.email }}</el-descriptions-item>

                        <el-descriptions-item label="创建者">{{ customer.createBy }}</el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{ customer.createTime }}</el-descriptions-item>
                        <el-descriptions-item label="更新者">{{ customer.updateBy }}</el-descriptions-item>
                        <el-descriptions-item label="更新时间">{{ customer.updateTime }}</el-descriptions-item>
                        <el-descriptions-item label="所属用户">{{ customer.userName }}</el-descriptions-item>
                        <el-descriptions-item label="所属部门">{{ customer.deptName }}</el-descriptions-item>
                        <el-descriptions-item label="备注">{{ customer.remark }}</el-descriptions-item>
                    </el-descriptions>
                    <p v-if="!enterprise.customers || enterprise.customers.length === 0">暂无关联客户信息</p>
                </el-tab-pane>
                <el-tab-pane label="合同详情" name="contract">
                    <el-table :data="enterprise.contracts" style="width: 100%" row-key="id">
                        <el-table-column type="index" align="cneter" width="50" show-overflow-tooltip></el-table-column>
                        <el-table-column label="合同编号" prop="contractCode" show-overflow-tooltip></el-table-column>
                        <el-table-column label="合同名称" prop="contractName" show-overflow-tooltip></el-table-column>
                        <el-table-column label="客户名称" prop="customerName" show-overflow-tooltip></el-table-column>
                        <el-table-column label="企业名称" prop="enterpriseName" show-overflow-tooltip></el-table-column>
                        <el-table-column label="合同类型" prop="contractType" show-overflow-tooltip :formatter="loadContractType"></el-table-column>
                        <el-table-column label="合同金额" prop="contractAmount" show-overflow-tooltip>
                            <template #default="scope">
                                <span>{{scope.row.contractAmount}}元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="总回款金额" prop="totalReceivable" show-overflow-tooltip>
                            <template #default="scope">
                                <span>{{scope.row.totalReceivable}}元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="待回款金额" prop="awaitReceivable" show-overflow-tooltip>
                            <template #default="scope">
                                <span>{{scope.row.awaitReceivable}}元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="总支出金额" prop="totalExpense" show-overflow-tooltip>
                            <template #default="scope">
                                <span>{{scope.row.totalExpense}}元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="总利润金额" prop="totalProfit" show-overflow-tooltip>
                            <template #default="scope">
                                <span>{{scope.row.totalProfit}}元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="净利润金额" prop="grossProfit" show-overflow-tooltip>
                            <template #default="scope">
                                <span>{{scope.row.grossProfit}}元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="到期状态" prop="expiryStatus" show-overflow-tooltip>
                            <template #default="scope">
                                <span v-if="scope.row.expiryStatus == '0'" class="color-primary">未到期</span>
                                <span v-else-if="scope.row.expiryStatus == '1'" class="color-warning">即将到期</span>
                                <span v-else-if="scope.row.expiryStatus == '2'" class="color-danger">已到期</span>
                                <span v-else-if="scope.row.expiryStatus == '3'" class="color-success">已续期</span>
                                <span v-else-if="scope.row.expiryStatus == '4'" class="color-info">已结束</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="到期天数" prop="expiryDay" show-overflow-tooltip>
                            <template #default="scope">
                                <span v-if="scope.row.expiryDay == -99999"></span>
                                <span v-else-if="scope.row.expiryDay >= 0">还有 {{ scope.row.expiryDay }} 天到期</span>
                                <span v-else-if="scope.row.expiryDay < 0" class="color-danger">已到期 {{ -scope.row.expiryDay }} 天，请及时续期</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="审核状态" prop="examineStatus" width="80" show-overflow-tooltip>
                            <template #default="scope">
                                <span v-if="scope.row.examineStatus == '0'" class="color-primary">草稿</span>
                                <span v-else-if="scope.row.examineStatus == '1'" class="color-warning">审核中</span>
                                <span v-else-if="scope.row.examineStatus == '2'" class="color-success">通过</span>
                                <span v-else-if="scope.row.examineStatus == '3'" class="color-danger">驳回</span>
                                <span v-else-if="scope.row.examineStatus == '4'" class="color-primary">撤回</span>
                                <span v-else-if="scope.row.examineStatus == '5'" class="color-info">作废</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip></el-table-column>
                        <el-table-column label="操作" show-overflow-tooltip width="250" v-auths="['crm:contract:info']">
                            <template #default="scope">
                                <el-button v-auth="'crm:contract:info'" type="primary" link @click="onOpenInfoCrmContract(scope.row)">详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
        <InfoCrmContract ref="infoCrmContractRef"></InfoCrmContract>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref } from 'vue';
import { getCrmEnterprise } from '/@/api/crm/enterprise/index';
import { getDictionaryByLabel } from '/@/api/system/dictionary/index';
import InfoCrmContract from '/@/views/crm/contract/infoCrmContract.vue';
export default {
    name: 'crm/customer/info',
    components: {
        InfoCrmContract,
    },
    setup(props, context) {
        const infoCrmContractRef = ref();
        const state = reactive({
            isShowDialog: false,
            activeName: 'enterprise',
            enterprise: {},
            customers: [],
            dictionary: new Map(),
        });

        const getDictionaryText = (dictLabel: String, dictValue: String) => {
            const dictionarys = state.dictionary.get(dictLabel) || [];
            return dictionarys.find(item => item.dictValue == dictValue)?.dictName;
        };

        const onOpenInfoCrmContract = (row: object) => {
            infoCrmContractRef.value.openDialog(row);
        }
        const loadContractType = (row, column, cellValue, index) => {
            const dictionarys = state.dictionary.get('crm_contract_type') || [];
            return dictionarys.find(item => item.dictValue == cellValue)?.dictName;
        }

        // 打开弹窗
        const openDialog = (row?: object) => {
            state.isShowDialog = true;
            if(row){
                getCrmEnterprise({id: row.id}).then((res) => {
                    if(res.code == 0){
                        state.enterprise = Object.assign({}, res.data);
                        state.customers = state.enterprise.customers;
                    }
                });
            }
            getDictionaryByLabel({ dictLabel: 'crm_customer_level' }).then((res: any) => {
                if (res.code == 0) {
                    state.dictionary.set('crm_customer_level', res.data);
                }
            });
            getDictionaryByLabel({ dictLabel: 'crm_customer_source' }).then((res: any) => {
                if (res.code == 0) {
                    state.dictionary.set('crm_customer_source', res.data);
                }
            });
            getDictionaryByLabel({ dictLabel: 'crm_enterprise_scale' }).then((res: any) => {
                if (res.code == 0) {
                    state.dictionary.set('crm_enterprise_scale', res.data);
                }
            });
            getDictionaryByLabel({ dictLabel: 'crm_contract_type' }).then((res: any) => {
                if (res.code == 0) {
                    state.dictionary.set('crm_contract_type', res.data);
                }
            });
            
        };
        // 关闭弹窗
        const closeDialog = (row?: object) => {
            state.isShowDialog = false;
            for(var key in state.formData) {
                state.formData[key] = undefined;
            }
        };
        
        return {
            infoCrmContractRef,
            openDialog,
            closeDialog,
            getDictionaryText,
            loadContractType,
            onOpenInfoCrmContract,
            ...toRefs(state),
        };
    },
};
</script>
<style scoped lang="scss">
.crm-enterprise-container {
    :deep .el-descriptions .is-bordered-label {
        width: 100px !important; /* 固定宽度为 100px */
    }
}
</style>